<template>
  <div class="gradient-card">
    <el-container style="height: 100%; display: flex; justify-content: center; align-items: center;">
      <!--        登录-->
      <transition name="el-zoom-in-left" >
        <el-row style="width: 1044.48px;height: 560.4px;min-width: 1044.48px;min-height: 560.4px;margin: 0 auto"  v-show="show">
            <el-col :span="12" class="left-col" style="padding: 80px 80px 48px;">
              <div style="display: flex; align-items: center;">
                <img src="../../assets/gitee.png" style="width: 45.31px; margin-right: 10px;">
                <span style="font-size: 36px;font-weight: bold;color: white">EverFlow</span>
              </div>
              <div style="color: white;font-size: 24px;margin-top: 20px">通用研发管理系统</div>
              <div style="margin-top: 45px"><span style="margin-right: 20px;color: #9b9ea8">常青</span><span style="color: #9b9ea8">开发者</span></div>
              <div style="margin-top: 17px;color: white;font-size: 14px;line-height: 1.71">everflow拥有企业级的高效开发效率，拥有完善的企业级开发基础，旨在让管理高效畅通，创造无限可能!</div>
              <div style="margin-top: 40%;">
                <el-divider style="color: #b6b8be!important;"></el-divider>
                <div style="color: white;text-align: center">EverFlow - 通用研发管理系统</div>
              </div>
            </el-col>
            <el-col :span="12" style="height: 100%">
              <el-card style="height: 100%;border-radius: 0;padding: 40px 50px 48px;">
                <el-row style="display: flex; justify-content: space-between; align-items: flex-end;margin-bottom: 6.5%">
                  <el-col :span="12" style="text-align: left;">
                    <div style="font-size: 25px;font-weight: bold;color: #40485b;">登录</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right;">
                    <div style="color: #005980;font-size: 14px;cursor: pointer;" type="text" @click="goregister">还没有账号？去注册</div>
                  </el-col>
                </el-row>

                <el-input placeholder="请输入用户名" v-model="user.username" clearable style="margin-bottom: 4.5%" autofocus></el-input>
                <el-input placeholder="请输入密码" type="password" v-model="user.password" show-password clearable autofocus></el-input>
                <el-row style="margin-top: 4.5%">
                  <el-col :span="12"> <el-checkbox v-model="checked">记住我</el-checkbox></el-col>
                  <el-col :span="12"><div style="text-align: right;color: #005980;font-size: 14px;cursor: pointer;" type="text" @click="email">邮箱验证登录</div>
                  </el-col>
                </el-row>

                <el-button style="width: 100%;margin-top:4.5%;background-color: #fe7300;border-color: #fe7300" type="primary" @click="login"  v-loading="loading">登  录</el-button>
                <div style="text-align: center;color: #005980;font-size: 14px;margin-top: 17px;cursor: pointer;" type="text" >已有账号，忘记密码？</div>
                <div style="display: flex; align-items: center; justify-content: center; margin-top: 42px;">
                  <img src="../../assets/品牌标识_网易邮箱.png" style="width: 32px; margin-right: 10px;">
                  <span style="font-size: 16px;">使用 邮箱 帐号登录</span>
                </div>
                <div style="margin-top: 9.5%">
                  <el-divider style="color: #8c92a4;"><div style="color: #8c92a4">其他登录方式</div></el-divider>
                </div>
                <el-row style="margin-top: 4.5%;text-align: center">
                  <el-col :span="6"><img src="../../assets/微博.png" style="width: 32px"> </el-col>
                  <el-col :span="6"><img src="../../assets/QQ-circle-fill.png" style="width: 32px"></el-col>
                  <el-col :span="6"><img src="../../assets/微信 (1).png" style="width: 32px"></el-col>
                  <el-col :span="6"><img src="../../assets/更多.png" style="width: 32px"></el-col>
                </el-row>
              </el-card>
            </el-col>
        </el-row>
      </transition>

      <!--        注册-->
      <transition name="el-zoom-in-right" >
        <el-row style="width: 1044.48px;height: 680.11px;min-width: 1044.48px;min-height: 635.11px"  v-show="!show">
          <el-col :span="12" class="left-col" style="padding: 80px 80px 48px;">
            <div style="display: flex; align-items: center;">
              <img src="../../assets/gitee.png" style="width: 45.31px; margin-right: 10px;">
              <span style="font-size: 36px;font-weight: bold;color: white">EverFlow</span>
            </div>
            <div style="color: white;font-size: 24px;margin-top: 20px">通用研发管理系统</div>
            <div style="margin-top: 45px"><span style="margin-right: 20px;color: #9b9ea8">常青</span><span style="color: #9b9ea8">开发者</span></div>
            <div style="margin-top: 4.7%;color: white;font-size: 14px;line-height: 1.71">everflow拥有企业级的高效开发效率，拥有完善的企业级开发基础，旨在让管理高效畅通，创造无限可能!</div>
            <div style="margin-top: 50%;">
              <el-divider style="color: #b6b8be!important;"></el-divider>
              <div style="color: white;text-align: center">EverFlow - 通用研发管理系统</div>
            </div>
          </el-col>
          <el-col :span="12" style="height: 100%">
            <el-card style="height: 100%;border-radius: 0;padding: 17px 50px 48px;">
              <el-row style="display: flex; justify-content: space-between; align-items: flex-end;margin-bottom: 20px">
                <el-col :span="12" style="text-align: left;">
                  <div style="font-size: 25px;font-weight: bold;color: #40485b;">注册</div>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                  <div style="color: #005980;font-size: 14px;cursor: pointer;" type="text" @click="gologin">已有账号，去登录</div>
                </el-col>
              </el-row>
              <el-input placeholder="请输入用户名" v-model="register.username" clearable style="margin-bottom: 4.6%"></el-input>
              <el-input placeholder="请输入邮箱" v-model="register.email" clearable style="margin-bottom: 4.6%"></el-input>
              <el-input placeholder="请输入密码" style="margin-bottom: 4.6%" type="password" v-model="register.password" show-password clearable></el-input>
              <el-input  placeholder="请重复输入密码" type="password" v-model="register.copypass" show-password clearable />
              <el-row style="margin-top: 4.6%">
                <el-col :span="20">  <el-input  placeholder="请输入邮箱验证码"  v-model="register.codeemail"  clearable /></el-col>
                <el-col :span="4" style="text-align: right"> <el-button  class="get-verify" @click="sendcode1()">{{btntxt1}}</el-button></el-col>
              </el-row>

              <el-row style="margin-top: 4.6%">
                <el-col :span="24"> <el-checkbox v-model="checked2">我已阅读并同意<span style="color: #005980;font-size: 14px"> 使用条款</span> 及<span style="color: #005980;font-size: 14px"> 规范条约</span></el-checkbox></el-col>
              </el-row>

              <el-button style="width: 100%;margin-top:17px;background-color: #fe7300;border-color: #fe7300" type="primary" @click="register1">注 册</el-button>
              <div style="text-align: center;color: #005980;font-size: 14px;margin-top: 17px;cursor: pointer;" type="text" >已有账号，忘记密码？</div>
              <div style="display: flex; align-items: center; justify-content: center; margin-top: 32px;">
                <img src="../../assets/品牌标识_网易邮箱.png" style="width: 32px; margin-right: 10px;">
                <span style="font-size: 16px;">使用 邮箱 帐号登录</span>
              </div>
              <div style="margin-top: 20px">
                <el-divider style="color: #8c92a4;"><div style="color: #8c92a4">其他登录方式</div></el-divider>
              </div>
              <el-row style="margin-top: 4.6%;text-align: center">
                <el-col :span="6"><img src="../../assets/微博.png" style="width: 32px"> </el-col>
                <el-col :span="6"><img src="../../assets/QQ-circle-fill.png" style="width: 32px"></el-col>
                <el-col :span="6"><img src="../../assets/微信 (1).png" style="width: 32px"></el-col>
                <el-col :span="6"><img src="../../assets/更多.png" style="width: 32px"></el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </transition>
    </el-container>
  </div>
</template>

<script>
import { resetRouter } from '../../router'
import {setRoutes} from '../../router';
import { Toast } from 'vant';
import Vue from 'vue';
Vue.use(Toast);
import request from "../../utils/request";
export default {
  data() {
    return {
      loading:false,
      time1:60,
      btntxt1:"发送验证码",
      checked2:false,
      checked:false,
    show:true,
//      注册数据
      register:{},
//        登录数据
      user:{}
    }
  },
  mounted() {
      // 重置路由
      resetRouter()
  },
  methods: {
    //注册
    register1(){
      let url='/register'
      if (!this.register.password||!this.register.copypass||!this.register.username||!this.register.email){
        Toast.fail('请填写完整')
        return
      }
      if (!this.checked2){
        Toast.fail('请同意我们的服务条款')
        return
      }

      if (this.register.password!==this.register.copypass){
        this.message("两次密码不一致",'error')

      }else {
        request.post(url, this.register).then(resp => {
          if (resp.code === 200) {
            this.reset()
            this.message(resp.errorMessage, 'success')
          } else {
            this.message(resp.errorMessage, 'error')
          }
        })
      }
    },
    //邮箱验证码倒计时
    timer1() {
      if (this.time1 > 0) {
        this.disabled1=true;
        this.time1--;
        this.btntxt1=this.time1+"秒";
        setTimeout(this.timer1, 1000);
      } else{
        this.time1=0;
        this.btntxt1="发送验证码";
        this.disabled1=false;
      }

    },
    sendcode1(){
      request.post('/seamail',{email:this.register.email}).then(resp=>{
        if (resp.code===200){
          Toast.success(resp.errorMessage)
        }else {
          Toast.fail(resp.errorMessage)
        }
      })
      this.time1=60;
      this.timer1()
    },
    //登录
    login(){
      this.loading=true
    let url='/login/user'
      request.post(url,this.user).then(resp=>{
        if (resp.code===200){
          console.log(resp.msg)
          localStorage.setItem("token",resp.host)
          localStorage.setItem("menus",JSON.stringify(resp.data))
          localStorage.setItem("user",JSON.stringify(resp.msg.user))
          localStorage.setItem("permissions",JSON.stringify(resp.msg.permissions))
          setRoutes()
          this.$router.push('/home')
          Toast.success(resp.errorMessage);
          this.loading=false
        }else {
          this.message(resp.errorMessage,'error')
          this.loading=false
        }
      }).catch(err=>{
        this.message(err,'error')
        this.loading=false
      })
    },
    email(){
      Toast.fail("功能暂未开放")
    },
    reset(){
      this.register={
        username:undefined,
        password:undefined,
        copypass:undefined,

      }
    },
    gologin(){
      this.show=!this.show
      this.register={
        username:undefined,
        password:undefined,
        copypass:undefined
      }
      this.checked2=false,
        this.checked=false
    },
    goregister(){
      this.show=!this.show
      this.user={
        username:undefined,
        password:undefined
      }
      this.checked2=false,
        this.checked=false
    },

  }
}
</script>

<style scoped>
.get-verify {
  right: 0px;
  z-index: 9;
  outline: none;
  cursor: pointer;
  padding: 0;
  top: 0px!important;
  position: absolute!important;
  left: auto!important;
  width: 74px;
  height: 40px;
  border: 0;
  color: #fff;
  background: #fc3737;
  border-radius: 2px;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
}
.left-col {
  background-image: url(../../assets/left-2-4f76bf713bc13c53d0973eda61dd1b55.jpg);
  background-color: rgba(64, 72, 91, 0.94);
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}

.gradient-card {
  background: linear-gradient(to right, #c9c8c8, #ffffff, #c9c8c8);
  animation: gradient-animation 5s linear infinite;
  background-size: 200% 200%;
  position: fixed;
  height: 100%;
  width: 100%;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
